<template>
  <div>
    <Tabs ref="tabs" style="margin: 10px" :value="status.selectedTabs" @on-click="chooseTab" :animated="false">
      <TabPane label="目标用户抓取/导入记录" name="importRecords" v-if="this.showType==='left'">
        <Table stripe border ref="importRecordList" :columns="importRecordTable" :data="importRecordList"
               class="table_css" no-data-text="暂无数据"></Table>
        <div style="float: right;">
          <Page :total="tImportRecordPage.total" :page-size="tImportRecordPage.stepNumber"
                :current="tImportRecordPage.currentPage"
                @on-change="changeImportPage" @on-page-size-change="importSizeChange" :page-size-opts=[20,40,60,80]
                show-sizer show-elevator/>
        </div>
      </TabPane>
      <TabPane label="目标用户信息解析记录" name="getInfoRecords" v-if="this.showType==='right'">
        <Table stripe border ref="getInfoRecordList" :columns="getInfoRecordTable" :data="getInfoRecordList"
                class="table_css" no-data-text="暂无数据"></Table>
        <div style="float: right;">
          <Page :total="tGetInfoRecordPage.total" :page-size="tGetInfoRecordPage.stepNumber"
                :current="tGetInfoRecordPage.currentPage"
                @on-change="changeGetInfoPage" @on-page-size-change="getInfoSizeChange" :page-size-opts=[20,40,60,80]
                show-sizer show-elevator/>
        </div>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
  import tiyData from "./js/importRecord/importRecord_data";
  import {
    init,
    searchGetInfoRecords,
    searchImportRecords,
      getCustomerPlatforms
  } from "./js/importRecord/importRecord_fun";

  export default {
    name: "ImportCustomerRecord",
    props:{
      showType:{
        type:String,
        default:"all"
      }
    },
    data() {
      return {
        tParam: tiyData.tParams,
        status: tiyData.tStatus,
        tGetInfoRecordPage: tiyData.tGetInfoRecordPage,
        getInfoRecordList: tiyData.tData.getInfoRecordList,
        getInfoRecordTable: tiyData.getInfoRecordTable(),
        importRecordList: tiyData.tData.importRecordList,
        importRecordTable: tiyData.importRecordTable(this),
        tImportRecordPage: tiyData.tImportRecordPage,
          customerPlatforms:[]
      }
    },
    methods: {
      searchGetInfoRecord() {
        searchGetInfoRecords(this, tiyData);
      },
      changeGetInfoPage(page) {
        tiyData.tGetInfoRecordPage.currentPage = page;
        searchGetInfoRecords(this, tiyData);
      },
      getInfoSizeChange(p) {
        tiyData.tGetInfoRecordPage.stepNumber = p;
        searchGetInfoRecords(this, tiyData);
      },
      searchImportRecord() {
        searchImportRecords(this, tiyData);
      },
      changeImportPage(page) {
        tiyData.tImportRecordPage.currentPage = page;
        searchImportRecords(this, tiyData);
      },
      importSizeChange(p) {
        tiyData.tImportRecordPage.stepNumber = p;
        searchImportRecords(this, tiyData);
      },
      chooseTab(tabName) {
        if(tabName == "importRecords"){
          searchImportRecords(this, tiyData);
        } else if(tabName == "getInfoRecords"){
          searchGetInfoRecords(this, tiyData);
        }
      }
    },
    mounted() {
      scrollTo(0, 0);
        getCustomerPlatforms(this, tiyData);
    }
  }
</script>

<style scoped lang="less">
  .table_css {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 20px;
  }
</style>
